<template>
  <div class="cloudvideo-about">
    <div class="live-about-basic">
      <div class="live-about-basic-content">
        <p>
          流量余额:
          <span>{{ flowBalance }}</span> G
        </p>
        <p>
          存储空间余额:
          <span>{{ totalStorageCapacity }}</span> G
        </p>
      </div>
    </div>
    <div class="cloudvideo-about-chart">
      <div class="cloudvideo-about-chart-header">
        <div class="cloudvideo-about-chart-header-left">
          使用趋势
        </div>
      </div>
      <div class="cloudvideo-about-chart-main">
        <bar-chart id="cloudvideo-bar1" :data="data1" height="500px" width="50%" class-name="msg-bar"/>
        <bar1-chart id="cloudvideo-bar2" :data="data2" height="500px" width="50%" class-name="msg-bar"/>
      </div>
    </div>
  </div>
</template>
<script>
  import BarChart from './bar'
  import Bar1Chart from './bar1'
  import {getCloudFlowStatistics} from "@/api/cloud/cloud_video"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      BarChart,
      Bar1Chart
    },
    data() {
      return {
        flowBalance: 0,
        totalStorageCapacity: 0,
        data1: {
          name: '存储空间使用趋势'
        },
        data2: {
          name: '流量使用趋势'
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getCloudFlowStatistics(getTenantId()).then(response => {
          if (response.data) {
            this.flowBalance = response.data.flowBalance;
            this.totalStorageCapacity = response.data.totalStorageCapacity;
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .cloudvideo-about {
    &-header {
      width: 100%;
      overflow: hidden;
      padding: 20px 5px;

      &-item {
        width: 570px;
        height: 140px;
        position: relative;
        margin-right: 20px;
        float: left;

        img {
          position: absolute;
          left: 35px;
          top: 38px;
        }

        .title {
          position: absolute;
          left: 145px;
          top: 40px;
          font-size: 18px;
        }

        .tip {
          position: absolute;
          left: 145px;
          top: 80px;
          font-size: 14px;
        }
      }

      .left {
        background-color: #479eff;
        color: #fff;
      }

      .right {
        border: 1px solid #aed3ff;
        color: #479eff;
      }
    }

    &-chart {
      width: 100%;
      padding-bottom: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
      margin: 20px 0;

      &-header {
        font-size: 16px;
        padding: 0 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
        overflow: hidden;

        &-left {
          float: left;
          height: 36px;
          line-height: 36px;
        }

        &-right {
          float: right;
        }
      }

      &-main {
        width: 100%;
        padding: 0 20px;

        .msg-bar {
          margin: auto;
          float: left;
        }
      }
    }

    .live-about-basic {
      width: 100%;
      padding-bottom: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
    }

    .live-about-basic-content {
      margin-top: 30px;

      p {
        margin-left: 50px;
        margin-top: 30px;
        font-size: 16px;
      }

      p:first-child span {
        font-size: 24px;
        color: #409eff;
      }

      :nth-child(2) span {
        color: #666 !important;
        font-size: 16px;
        padding-left: 10px !important;
      }

      p:last-child {
        margin-top: 5px;
        color: #a94442;
        font-size: 15px;
      }
    }
  }
</style>
